@font-face {
  font-family: JetBrainsMono;
  src: url('@/assets/fonts/JetBrainsMono-Regular.woff2');
}

pre {
  font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;

  code,
  span {
    font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;
  }
}

code {
  font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;
}


.icon {
  fill: var(--td-text-color-primary);
}

pre code.hljs {
  overflow-x: initial !important;
}


.arco-layout-sider {
  background-color: rgba(255, 255, 255, 0.0) !important;
}

.cherry-detail-body {
  color: var(--td-text-color-secondary);
}


.cherry {
  background-color: var(--kb-bg-color-container);

  .cherry-markdown {
    &:not(pre) > code {
      background-color: var(--kb-bg-color-component) !important;
      color: var(--td-error-color) !important;
      font-family: "JetBrainsMono", "楷体", "宋体", serif;
      padding: 0 4px;
      margin: 0 4px;
    }

    &.theme__dark {
      ul.cherry-list__default {
        background-color: transparent !important;
      }

      table th, .cherry-table th {
        background-color: var(--kb-bg-color-component) !important;
      }

      .cherry-editor {
        background-color: var(--kb-bg-color-component);
      }
    }
  }

  .cherry-flex-toc {
    background-color: var(--td-bg-color-container) !important;
    color: var(--td-text-color-primary) !important;
    box-shadow: var(--td-shadow-3);

    .cherry-toc-one-a {
      color: var(--td-text-color-primary) !important;

      &:hover {
        color: var(--td-brand-color) !important;
      }

      &.current {
        color: var(--td-brand-color-active) !important;
      }
    }
  }

  .cherry-dropdown {
    color: var(--td-text-color-primary) !important;
    background-color: var(--td-bg-color-component) !important;

    .cherry-dropdown-item {
      &:hover {
        background-color: var(--td-bg-color-component-hover) !important;
      }
    }

    .cherry-toolbar-button {
      color: var(--td-text-color-primary) !important;
      background-color: var(--td-bg-color-component-hover) !important;
    }

    .cherry-insert-formula-tab {
      &.active {
        color: var(--td-text-color-placeholder) !important;
        border: 1px solid var(--td-text-color-placeholder) !important;
      }
    }

    .cherry-insert-formula-categary__func {
      color: var(--td-text-color-primary) !important;
      background-color: var(--td-bg-color-component) !important;
    }

    .cherry-insert-formula-categary__func-item {
      color: var(--td-text-color-primary) !important;
      background-color: var(--td-bg-color-component) !important;
    }
  }

  .cherry-toolbar {
    background-color: var(--td-bg-color-container);
  }

  .cherry-editor {
    .CodeMirror {
      background-color: var(--td-bg-color-container);
    }
  }
}

.codex-editor {
  .ce-toolbar__plus, .ce-toolbar__settings-btn {
    &:hover {
      background-color: var(--td-bg-color-component-hover);
    }

    svg {
      color: var(--td-text-color-primary);
    }
  }

  .ce-block.ce-block--selected {
    .ce-block__content {
      background-color: var(--td-bg-color-component);
    }
  }

  .ce-popover__container {
    background-color: var(--td-bg-color-container);

    .cdx-search-field {
      background-color: var(--td-bg-color-component-hover);
    }


    .ce-popover-item {
      &:hover {
        background-color: var(--td-bg-color-component-hover);
      }

      &.ce-popover-item--no-focus {
        &:hover {
          background-color: var(--td-error-color);
          color: var(--td-text-color-anti);
        }
      }

      .ce-popover-item__title {
        color: var(--td-text-color-secondary);
      }

      svg {
        color: var(--td-text-color-secondary);
      }
    }
  }
}

.t-dropdown__submenu ul {
  margin: 0;
}

.t-drawer__body {
  position: relative;
}

.abs-drawer {
  .t-drawer__body {
    padding: 0;
  }
}

.mx-context-menu {
  .mx-context-menu-item {
    .preserve-width {
      width: unset !important;
      max-width: 24px;

      .t-icon, .icon {
        margin-right: 10px;
      }
    }
  }
}

.splitpanes__splitter {
  background-color: var(--td-border-level-1-color) !important;
  border-left: none !important;
}

.editor-common {
  span[data-type="mention"] {
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    color: var(--td-brand-color);
    border: 1px solid var(--td-border-level-2-color);
    border-radius: 5px;
    padding: 0 3px;

    &:hover {
      color: var(--td-brand-color-hover);
    }
  }
}